<template>
    <div id="right-bottom-bar" style="width: 100%; height: 485px"></div>
    <span class="select">
        <a-select
            style="width: 120px"
            v-model:value="value"
            :options="options"
            @change="handleChange"
        ></a-select>
    </span>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue'

import echarts from '@/echarts'

import { option, contains, dataname } from './constant'
import { result } from '../../constant'

export default defineComponent({
    name: 'RightBottomBar',
    setup() {
        const constant = {
            option
        }
        const state = reactive({
            value: 0,
            options: [] as any
        })
        onMounted(() => {
            state.options = result.map((el: any, index: any) => {
                return {
                    label: el.countyName,
                    value: el.id
                }
            })
            state.value = state.options[0].value
            echarts.init(document.getElementById('right-bottom-bar')).setOption(constant.option)
        })
        const methods = {
            handleChange(value: any) {
                methods.initChart(value)
            },
            initChart(value: any) {
                let strArr = result.find((el: any) => el.id === value)?.afterService
                let datavaule = JSON.parse(strArr)
                constant.option.radar.name.formatter = function (value: any) {
                    var i = contains(dataname, value) as any
                    var percent = datavaule[i]
                    var ret = '' //拼接加\n返回的类目项
                    var maxLength = 6 //每项显示文字个数
                    var valLength = value.length //X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                    if (rowN > 1) {
                        //如果类目项的文字大于6,
                        var temp = '' //每次截取的字符串
                        var start = 0 //开始截取的位置
                        var end = maxLength //结束截取的位置
                        temp = value.substring(start, end) + '\n' + value.substring(end, valLength)
                        ret += temp //凭借最终的字符串
                        return '{a|' + percent + '}\n' + '{b|' + ret + '}'
                    } else {
                        return '{a|' + percent + '}\n' + '{b|' + value + '}'
                    }
                } as any
                constant.option.series[0].data = [JSON.parse(strArr)]
                console.log(constant.option.series[0].data)
                nextTick(() => {
                    echarts
                        .init(document.getElementById('right-bottom-bar'))
                        .setOption(constant.option)
                })
            }
        }
        return {
            ...toRefs(state),
            ...constant,
            ...methods
        }
    }
})
</script>
<style lang="scss" scoped>
.select {
    position: absolute;
    left: 10px;
    top: 20px;
}
</style>
